<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      svg {
        border: 1px solid red;
      }

      line,
      polyline,
      rect {
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    </style>
  </head>

  <body>
    <!-- symbol元素：和g类似，但不会展示 -->
    <svg width="300"
         height="300"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         viewBox="0 0 300 300">
      <title>Symbols vs. groups</title>
      <desc>Use</desc>
      <defs>
        <g id="octagon"
           style="stroke: black;">
          <desc>Octagon as group</desc>
          <polygon points="
          36 25, 25 36, 11 36, 0 25,
          0 11, 11 0, 25 0, 36 11" />
        </g>
        <symbol id="sym-octagon"
                style="stroke: black;"
                preserveAspectRatio="xMidYMid slice"
                viewBox="0 0 40 40">
          <desc>Octagon as symbol</desc>
          <polygon points="
          36 25, 25 36, 11 36, 0 25,
          0 11, 11 0, 25 0, 36 11" />
        </symbol>
      </defs>
      <g style="fill:none; stroke:gray">
        <rect x="40"
              y="40"
              width="30"
              height="30" />
        <rect x="80"
              y="40"
              width="40"
              height="60" />
        <rect x="40"
              y="110"
              width="30"
              height="30" />
        <rect x="80"
              y="110"
              width="40"
              height="60" />
      </g>
      <use xlink:href="#octagon"
           x="40"
           y="40"
           width="30"
           height="30"
           style="fill: #c00;" />
      <use xlink:href="#octagon"
           x="80"
           y="40"
           width="40"
           height="60"
           style="fill: #cc0;" />
      <use xlink:href="#sym-octagon"
           x="40"
           y="110"
           width="30"
           height="30"
           style="fill: #cfc;" />
      <use xlink:href="#sym-octagon"
           x="80"
           y="110"
           width="40"
           height="60"
           style="fill: #699;" />


    </svg>
  </body>

</html>
